<template>
    <div class="goods">
        <!-- 1.搜索区域 -->
        <div class="header">
            <!-- change 仅在输入框失去焦点或用户按下回车时触发 -->
            <el-input @change="searchInput" v-model="input" placeholder="请输入内容"></el-input>
            <el-button type="primary">查询</el-button>
            <el-button type="primary">添加</el-button>
        </div>

        <!-- 2.表格区域展示视图数据 -->
        <div class="wrapper">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column type="selection" width="55" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="id" label="商品ID" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="title" label="商品名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="price" label="商品价格" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="num" label="商品数量" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="category" label="规格类目" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="image" label="商品图片" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sellPoint" label="商品卖点" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="descs" label="商品描述" width="180" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 3.分页区域 -->
        <MyPagination :total="total" :pageSize="pageSize" @pageChange="pageChange" />
    </div>
</template>

<script>
import MyPagination from '../../components/MyPagination.vue';
export default {
    name: 'GoodsList',
    components: { MyPagination },
    data() {
        return {
            input: '',
            tableData: [],
            total: 10,
            pageSize: 1,
            type: 1,
            list: [],
            page: 1,
        }
    },
    methods: {
        //分页页码改变事件
        pageChange(val) {
            if (this.type == 1) {
                this.http(val); //商品列表分页
            } else {
                //搜索分页
                console.log('搜索的分页处理---');
                this.tableData = this.list.slice((val - 1) * this.pageSize, val * this.pageSize);
            }
            this.page = val;
        },
        //搜索查询页面
        searchInput(val) {
            console.log('搜索内容', val);
            this.$api.getSearch({ search: val }).then(res => {
                console.log('搜索---', res.data);

                if (res.data.status === 200) {
                    this.list = res.data.result;
                    console.log(res.data.result);
                    //需要分页显示10条数据
                    this.total = res.data.result.length;

                    this.pageSize = 8; //每页显示条数
                    this.tableData = res.data.result.slice(0, this.pageSize);
                    this.type = 2; //搜索分页
                } else {
                    this.tableData = [];
                    this.total = 1;
                    this.pageSize = 1;
                    this.type = 1; //搜索分页
                }
            })
        },
        //编辑事件
        handleEdit(index, row) {
            console.log(index, row);
        },
        //删除事件
        handleDelete(index, row) {
            console.log(index, row);
        },
        //商品列表的获取
        http(page) {
            this.$api.getGoodsList({ page }).then(res => {
                console.log(res.data);
                if (res.status === 200) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                    this.pageSize = res.data.pageSize;
                }
            })
        },
    },
    created() {
        this.http(1)
    }
}
</script>

<style lang="less" scoped>
.goods {
    margin: 20px;
}
.header {
    display: flex;
    button {
        margin-left: 20px;
    }
}
.wrapper {
    margin: 20px 0;
}
</style>
